<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录 生日蛋糕网上订购 生日蛋糕预订</title>
		<link rel="stylesheet" href="css/header.css" type="text/css">
		<link rel="stylesheet" href="css/login.css" type="text/css">
	</head>
	<body>
		<div class="header">
		  <div class="header-nav">
		    <a class="header-logo" href="index.html">
		      <img src="img\logo.png" >
		    </a>
		    <ul class="nav-box">
		      <li><a href="index.html">首页</a> </li>
		      <li><a href="https://www.lecake.com/SH/category-5-1.html">全国送</a> </li>
		      <li><a href="firm.html">企业专区</a> </li>
		    </ul>
		 
		  <div class="right-city-user">
					<ul>
						<li><a href="index.html" id="wechat">微信小程序</a>
					<div id="shift-in">
						<img src="img/wechat.jpg"/>
					</div></li>
						<li class="city-dropdown">
						                    <div class="current-city">城市</div>
						                    <div class="city-menu">
						                        <ul>
						                            <li><a href="#">北京</a></li>
						                            <li><a href="#">上海</a></li>
						                            <li><a href="#">广州</a></li>
						                            <li><a href="#">深圳</a></li>
						                            <li><a href="#">成都</a></li>
						                            <!-- 更多城市选项 -->
						                        </ul>
						                    </div>
						                </li>
						<li><a class="header-message" href="index.html">消息</a></li>
						<li><span class="not-login">
		              <a href="login.html">登录</a>
							/
							<a href="zhuce.html">注册</a>
							</span>
						</li>
						<li><a href="index.html" class="header-cart" id="cart-count-icon">购物车</a></li>
					</ul>
		   
		 
		    
		    
		    
		  </div> </div>
		</div>
		<div class="login-background">
			
			<div class="login-container">
			  <h2>登录</h2>
			
			  <div class="toggle-btns">
			      <button id="account-login-btn" class="active">账号密码登录</button>
			      <button id="phone-login-btn">手机号验证码登录</button>
			  </div>
			
			  <div class="login-methods">
			      <!-- 账号密码登录 -->
			      <div class="login-method active" id="account-login">
			          <h3>账号密码登录</h3>
			          <form>
			              <input type="text" id="username" placeholder="用户名/邮箱" required>
			              <input type="password" id="password" placeholder="密码" required>
			              <div class="remember-option">
			                  <label>
			                      <input type="checkbox" id="remember-me"> 记住账号
			                  </label>
			              </div>
			              <button type="submit">登录</button>
			          </form>
			          <p><a href="zhuce.html" class="register-link">去注册</a></p>
			      </div>
			
			      <!-- 手机号验证码登录 -->
			      <div class="login-method" id="phone-login">
			          <h3>手机号验证码登录</h3>
			          <form>
			              <div class="phone-input">
			                  <input type="tel" id="phone" placeholder="手机号" required>
			              </div>
			              <div class="captcha-input">
			                  <input type="text" id="captcha" placeholder="图片验证码" maxlength="4" required>
			                  <img id="captcha-img" src="captcha.png" alt="验证码" onclick="changeCaptcha()">
			              </div>
			              <div class="phone-verify">
			                  <input type="text" id="sms-code" placeholder="短信验证码" maxlength="6" required>
			                  <button type="button" id="get-sms-code">获取验证码</button>
			              </div>
			              <div class="remember-option">
			                  <label>
			                      <input type="checkbox" id="remember-phone"> 记住账号
			                  </label>
			              </div>
			              <button type="submit">登录</button>
			          </form>
			      </div>
			  </div>
			</div>
		</div>
		<script>
		  // 切换登录方式
		  document.getElementById('account-login-btn').addEventListener('click', function() {
		      // 激活账号密码登录
		      document.getElementById('account-login').classList.add('active');
		      document.getElementById('phone-login').classList.remove('active');
		      this.classList.add('active');
		      document.getElementById('phone-login-btn').classList.remove('active');
		  });
		
		  document.getElementById('phone-login-btn').addEventListener('click', function() {
		      // 激活手机号验证码登录
		      document.getElementById('phone-login').classList.add('active');
		      document.getElementById('account-login').classList.remove('active');
		      this.classList.add('active');
		      document.getElementById('account-login-btn').classList.remove('active');
		  });
		
		  // 更换图片验证码
		  function changeCaptcha() {
		      const captchaImg = document.getElementById('captcha-img');
		      const randomQuery = new Date().getTime();
		      captchaImg.src = `captcha.php?${randomQuery}`; // 假设图片验证码通过PHP动态生成
		  }
		  
		  // 获取短信验证码按钮事件
		  document.getElementById('get-sms-code').addEventListener('click', function() {
		      const phone = document.getElementById('phone').value;
		      if (phone.length === 11) {
		          // 模拟获取验证码（可以用Ajax请求后端来发送验证码）
		          alert('验证码已发送到 ' + phone);
		      } else {
		          alert('请输入有效的手机号');
		      }
		  });
		
		</script>
		<script type="text/javascript" src="js/jquery-1.12.4(1).js" ></script>
		<script type="text/javascript" src="js/header.js"></script>
	</body>
</html>